/**
 * 登录注册页面组件 - 系统认证入口和企业注册界面
 *
 * 开发人员：郭畅
 * 开发时间：2025-10-25 至 2025-10-30
 * 模块职责：提供系统登录和企业注册功能界面，支持多租户认证和企业信息录入
 *
 * 技术要点：
 * - JWT认证登录和企业注册流程
 * - 美团品牌风格的登录界面设计
 * - 多租户企业ID和用户信息管理
 * - 表单验证和错误处理机制
 * - 前后端认证接口集成和状态管理
 *
 * 开发故事：负责登录注册页面的完整前端实现，与后端认证服务深度集成，为多租户系统提供安全的认证入口和企业注册功能。
 */
<template>
  <div class="login-container">
    <div class="login-box">
      <div class="logo-section">
        <img src="@/assets/images/美团图标右侧带字.png" alt="智融财务" class="logo-image" />
        <h1 class="system-title">智融财务管理系统</h1>
        <p class="system-subtitle">企业级金融科技SaaS平台</p>
      </div>
      
      <!-- 登录表单 -->
      <el-form v-if="!isRegisterMode" :model="form" @submit.native.prevent="onLogin" :rules="rules" ref="loginForm">
        <el-form-item prop="enterpriseId">
          <el-input 
            v-model.number="form.enterpriseId" 
            placeholder="企业ID"
            prefix-icon="el-icon-office-building">
          </el-input>
        </el-form-item>
        
        <el-form-item prop="username">
          <el-input 
            v-model="form.username" 
            placeholder="用户名"
            prefix-icon="el-icon-user">
          </el-input>
        </el-form-item>
        
        <el-form-item prop="password">
          <el-input 
            type="password" 
            v-model="form.password" 
            placeholder="密码"
            prefix-icon="el-icon-lock"
            @keyup.enter.native="onLogin">
          </el-input>
        </el-form-item>
        
        <el-form-item>
          <el-button 
            type="primary" 
            @click="onLogin" 
            :loading="loading"
            style="width:100%; height: 44px; font-size: 16px;">
            {{loading ? '登录中...' : '登录'}}
          </el-button>
        </el-form-item>
        
        <div class="form-footer">
          <span class="toggle-link" @click="toggleMode">
            <i class="el-icon-edit"></i> 注册新企业
          </span>
        </div>
      </el-form>
      
      <!-- 企业注册表单 -->
      <el-form v-else :model="registerForm" :rules="registerRules" ref="registerForm" label-position="top">
        <el-form-item label="企业信息" style="margin-bottom: 10px;">
          <el-divider style="margin: 0;"></el-divider>
        </el-form-item>
        
        <el-form-item label="企业名称" prop="enterpriseName">
          <el-input v-model="registerForm.enterpriseName" placeholder="请输入企业全称"></el-input>
        </el-form-item>
        
        <el-form-item label="统一社会信用代码（选填）" prop="creditCode">
          <el-input v-model="registerForm.creditCode" placeholder="18位统一社会信用代码"></el-input>
        </el-form-item>
        
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="联系人" prop="contactName">
              <el-input v-model="registerForm.contactName" placeholder="联系人姓名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话" prop="contactPhone">
              <el-input v-model="registerForm.contactPhone" placeholder="手机号"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-form-item label="管理员账号" style="margin-bottom: 10px; margin-top: 20px;">
          <el-divider style="margin: 0;"></el-divider>
        </el-form-item>
        
        <el-form-item label="用户名" prop="username">
          <el-input v-model="registerForm.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="registerForm.email" placeholder="请输入邮箱地址"></el-input>
        </el-form-item>
        
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="密码" prop="password">
              <el-input type="password" v-model="registerForm.password" placeholder="至少6位"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="确认密码" prop="confirmPassword">
              <el-input type="password" v-model="registerForm.confirmPassword" placeholder="再次输入密码"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-form-item style="margin-top: 20px;">
          <el-button 
            type="primary" 
            @click="onRegister" 
            :loading="loading"
            style="width:100%; height: 44px; font-size: 16px;">
            {{loading ? '注册中...' : '立即注册'}}
          </el-button>
        </el-form-item>
        
        <div class="form-footer">
          <span class="toggle-link" @click="toggleMode">
            <i class="el-icon-back"></i> 返回登录
          </span>
        </div>
      </el-form>
      
      <div class="login-tips" v-if="!isRegisterMode">
        <p><i class="el-icon-info"></i> 测试账号：admin / admin123</p>
      </div>
    </div>
    
    <div class="login-footer">
      <p>© 2025 智融财务管理系统 | 基于美团设计风格</p>
      <p>技术栈：Spring Boot + Vue.js + Element UI + ECharts</p>
      <p style="font-size: 12px; color: var(--text-tertiary); margin-top: 8px;">
        本系统为企业联合PBL课程作业项目 | 仅供学习交流使用
      </p>
    </div>
  </div>
</template>

<script>
import http from '../api/http'

export default {
  data(){ 
    return {
      isRegisterMode: false, // 是否为注册模式
      form: { 
        enterpriseId: 1, 
        username: '', 
        password: '' 
      },
      registerForm: {
        enterpriseName: '',
        creditCode: '',
        contactName: '',
        contactPhone: '',
        username: '',
        password: '',
        confirmPassword: '',
        email: ''
      },
      loading: false,
      rules: {
        enterpriseId: [{ required: true, message: '请输入企业ID', trigger: 'blur' }],
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      },
      registerRules: {
        enterpriseName: [
          { required: true, message: '请输入企业名称', trigger: 'blur' },
          { min: 2, max: 100, message: '长度在 2 到 100 个字符', trigger: 'blur' }
        ],
        contactName: [{ required: true, message: '请输入联系人姓名', trigger: 'blur' }],
        contactPhone: [
          { required: true, message: '请输入联系电话', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
        ],
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 50, message: '长度在 6 到 50 个字符', trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, message: '请确认密码', trigger: 'blur' },
          { validator: this.validateConfirmPassword, trigger: 'blur' }
        ]
      }
    } 
  },
  methods: {
    validateConfirmPassword(rule, value, callback) {
      if (value !== this.registerForm.password) {
        callback(new Error('两次输入密码不一致'))
      } else {
        callback()
      }
    },
    
    toggleMode() {
      this.isRegisterMode = !this.isRegisterMode
      // 清空表单
      if (this.$refs.loginForm) {
        this.$refs.loginForm.clearValidate()
      }
      if (this.$refs.registerForm) {
        this.$refs.registerForm.clearValidate()
      }
    },
    
    async onLogin(){
      this.$refs.loginForm.validate(async (valid) => {
        if (!valid) return
        
        this.loading = true
        try {
          const { data } = await http.post('/auth/login', this.form)
          if(data.code === 0){
            localStorage.setItem('token', data.data.token)
            localStorage.setItem('username', data.data.username)
            localStorage.setItem('enterpriseId', data.data.enterpriseId)
            localStorage.setItem('userId', data.data.userId)
            localStorage.setItem('enterpriseName', data.data.enterpriseName)
            const redirect = this.$route.query.redirect || '/dashboard'
            this.$router.push(redirect)
            this.$message.success('登录成功')
          } else {
            this.$message.error(data.message || '登录失败')
          }
        } catch(e) {
          this.$message.error(e.response?.data?.message || '登录失败，请检查网络连接')
        } finally {
          this.loading = false
        }
      })
    },
    
    async onRegister() {
      this.$refs.registerForm.validate(async (valid) => {
        if (!valid) return
        
        this.loading = true
        try {
          const { data } = await http.post('/auth/register/enterprise', this.registerForm)
          if(data.code === 0){
            // 注册成功，保存信息并跳转
            localStorage.setItem('token', data.data.token)
            localStorage.setItem('username', data.data.username)
            localStorage.setItem('enterpriseId', data.data.enterpriseId)
            localStorage.setItem('userId', data.data.userId)
            localStorage.setItem('enterpriseName', data.data.enterpriseName)
            this.$message.success('注册成功！欢迎使用智融财务管理系统')
            this.$router.push('/dashboard')
          } else {
            this.$message.error(data.message || '注册失败')
          }
        } catch(e) {
          console.error('注册异常', e)
          this.$message.error(e.response?.data?.message || '注册失败，请检查网络连接或联系管理员')
        } finally {
          this.loading = false
        }
      })
    }
  }
}
</script>

<style scoped>
.login-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: 
    radial-gradient(circle at 20% 80%, rgba(255, 209, 0, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(6, 192, 95, 0.15) 0%, transparent 50%),
    linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
  position: relative;
  overflow: hidden;
}

.login-container::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: 
    radial-gradient(circle at 30% 70%, rgba(255, 209, 0, 0.1) 0%, transparent 40%),
    radial-gradient(circle at 70% 30%, rgba(6, 192, 95, 0.1) 0%, transparent 40%);
  animation: float 20s ease-in-out infinite;
  pointer-events: none;
}

@keyframes float {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33% { transform: translate(30px, -30px) rotate(120deg); }
  66% { transform: translate(-20px, 20px) rotate(240deg); }
}

.login-box {
  width: 100%;
  max-width: 420px;
  background: white;
  border-radius: var(--radius-xl);
  box-shadow: 
    0 20px 40px rgba(0,0,0,0.1),
    0 0 0 1px rgba(255, 209, 0, 0.1);
  padding: 48px 40px 40px;
  position: relative;
  overflow: hidden;
  animation: slideInUp 0.8s ease-out;
  border: 2px solid rgba(255, 209, 0, 0.2);
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.login-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: var(--primary-gradient);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.login-box::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 80% 20%, rgba(255, 209, 0, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(6, 192, 95, 0.05) 0%, transparent 50%);
  pointer-events: none;
  z-index: -1;
}

.logo-section {
  text-align: center;
  margin-bottom: 40px;
  animation: fadeInDown 0.6s ease-out 0.2s both;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.logo-image {
  height: 72px;
  width: auto;
  margin-bottom: 20px;
  transition: all var(--transition-normal);
  filter: drop-shadow(0 4px 8px rgba(255, 209, 0, 0.3));
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.system-title {
  font-size: 28px;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 12px 0;
  background: var(--primary-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: fadeInUp 0.6s ease-out 0.4s both;
}

.system-subtitle {
  font-size: 16px;
  color: var(--text-secondary);
  margin: 0;
  font-weight: 500;
  animation: fadeInUp 0.6s ease-out 0.6s both;
}

.login-tips {
  text-align: center;
  margin-top: 32px;
  padding: 20px;
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  color: var(--text-secondary);
  font-size: 14px;
  border: 1px solid var(--border-primary);
  transition: all var(--transition-normal);
  animation: fadeInUp 0.6s ease-out 0.8s both;
}

.login-tips:hover {
  background: white;
  border-color: var(--primary-color);
  transform: translateY(-2px);
  box-shadow: var(--primary-shadow);
}

.login-tips i {
  color: var(--primary-color);
  margin-right: 8px;
  font-size: 16px;
  transition: all var(--transition-normal);
}

.login-tips:hover i {
  color: var(--primary-dark);
  transform: scale(1.1);
}

.login-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  padding: 20px;
  color: rgba(255,255,255,0.9);
  font-size: 13px;
  line-height: 1.8;
  background: rgba(0,0,0,0.1);
  backdrop-filter: blur(10px);
  animation: fadeInUp 0.6s ease-out 1s both;
}

.login-footer p {
  margin: 6px 0;
  transition: all var(--transition-normal);
}

.login-footer p:hover {
  color: rgba(255, 209, 0, 0.9);
  transform: translateY(-2px);
}

/* 表单样式优化 */
:deep(.el-form-item) {
  margin-bottom: 24px;
}

:deep(.el-input__inner) {
  height: 48px;
  font-size: 16px;
  border-radius: var(--radius-lg);
  border: 2px solid var(--border-color);
  transition: all var(--transition-normal);
  background: var(--bg-primary);
}

:deep(.el-input__inner:focus) {
  border-color: var(--primary-color);
  background: white;
  box-shadow: 0 0 0 4px rgba(255, 209, 0, 0.1);
  transform: translateY(-2px);
}

:deep(.el-input__prefix) {
  color: var(--primary-color);
  transition: all var(--transition-normal);
}

:deep(.el-input__inner:focus + .el-input__prefix) {
  color: var(--primary-dark);
  transform: scale(1.1);
}

:deep(.el-button--primary) {
  height: 48px;
  font-size: 16px;
  font-weight: 700;
  border-radius: var(--radius-lg);
  background: var(--primary-gradient);
  border: none;
  box-shadow: var(--primary-shadow);
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

:deep(.el-button--primary:hover) {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(255, 209, 0, 0.4);
}

:deep(.el-button--primary:active) {
  transform: translateY(-1px);
}

:deep(.el-button--primary::before) {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: left 0.5s;
}

:deep(.el-button--primary:hover::before) {
  left: 100%;
}

.form-footer {
  text-align: center;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-light);
}

.toggle-link {
  color: var(--primary-color);
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.toggle-link:hover {
  color: var(--primary-hover);
  text-decoration: underline;
}

.toggle-link i {
  font-size: 16px;
}

/* 响应式设计 */
@media (max-width: 480px) {
  .login-box {
    padding: 32px 24px;
    margin: 16px;
  }
  
  .system-title {
    font-size: 24px;
  }
  
  .logo-image {
    height: 60px;
  }
}
</style>
